<template>
  <section>
      <ul>
        <!-- 调用 li组件 -->
        <todo-item v-for="(item,index) in list" :key="index" :item="item" :status="status"></todo-item>
      </ul>
    </section>
</template>
<script>
import TodoItem from './TodoItem.vue'
export default {
  name:'TodoList',
  components:{TodoItem},
  props:['list'],
  data() {
    return {
      status:'all'
    }
  },
  methods: {
    setList:function (status) {
      if(status === 'all') {
        this.list.forEach(item => item.status = status);
        return;
      }
      this.list.forEach(item => {
        if(!item.isComplete) {
          item.status = 'active'
        }else {
          item.status = 'completed'
        }
      });
    }
  },
  mounted() {
    this.$bus.$on('setStatus', (status) => {
      this.status = status;
      this.setList(status)
      
    })
  }, 
}
</script>
<style scoped>
  /* section */
  section,
  section > ul,
  section > ul > li
  {
    width: 100%;

  }
  section > ul {
    box-sizing: border-box;
    border: 1px solid #2e2e2e;
    border-bottom: 0;
  }
</style>